<template>
    <div>
        <!-- 动态跳转按钮 -->
        <div class="router-buttons">
            <h3>路由跳转按钮</h3>
            <div class="button-grid">
                <el-button
                    v-for="route in showRoutes"
                    :key="route.path"
                    type="primary"
                    @click="handleRouteClick(route)"
                    class="route-button">
                    {{ route.meta?.title || route.name || route.path }}
                </el-button>
            </div>
        </div>
    </div>
</template>


<script setup>
import { reactive, ref, defineEmits, defineProps, computed } from 'vue'
import { useRouter } from 'vue-router'
import routerList from '@/router';

const router = useRouter()


// 过滤掉隐藏的路由
const showRoutes = computed(() => {
    let $showRoutes = []
    routerList.map(item=>{
        if(item.children){
            item.children.map(r=>{
                $showRoutes.push(r)
            })
        }
    })
    return $showRoutes
})

// 处理路由点击
const handleRouteClick = (route) => {
    try {
        router.push({name: route.name})
        console.log(`跳转到: ${route.meta?.title || route.name}`)
    } catch (error) {
        console.error('路由跳转失败:', error)
    }
}
</script>


<style scoped lang='less'>
.router-buttons {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    background-color: #f8f9fa;

    h3 {
        margin-bottom: 15px;
        color: #303133;
        font-size: 18px;
    }

    .button-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        
        .route-button {
            margin: 5px;
            min-width: 120px;
        }
    }
}
</style>
